<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title>彩虹渐变线</title>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style>
            html,
            body {
                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;
            }
            #map_container {
                width: 100%;
                height: 100%;
                margin: 0;
            }
            #cap,
            #join,
            .captext,
            .jointext {
                position: absolute;
                z-index: 10;
                top: 20px;
                left: 40px;
                width: 100px;
                font-size: 16px;
            }
            #join,
            .jointext {
                top: 60px;
            }
            .captext,
            .jointext {
                right: 150px;
                color: #fff;
            }
        </style>
        <script src="//code.bdstatic.com/npm/jquery@2.2.2/dist/jquery.min.js"></script>
        <script src="//api.map.baidu.com/api?v=1.0&type=webgl&ak=jPmTunsgWt4XPuUpbQzkOS0ntvcVZItT"></script>
        <script src="//mapv.baidu.com/build/mapv.min.js"></script>
        <script src="https://mapv.baidu.com/gl/examples/static/common.js"></script>
        <script src="https://code.bdstatic.com/npm/mapvgl@1.0.0-beta.189/dist/mapvgl.min.js"></script>
    </head>
    <body>
        <div id="map_container"></div>
        <div class="captext">选择端头样式</div>
        <select name="cap" id="cap">
            <option value="butt">butt 平头</option>
            <option value="square">square 方头</option>
            <option value="round">round 圆头</option>
        </select>
        <div class="jointext">选择拐角样式</div>
        <select name="join" id="join">
            <option value="miter">miter 尖角</option>
            <option value="bevel">bevel 平角</option>
            <option value="round">round 圆角</option>
        </select>
        <script>
            /* global BMapGL */
            /* global Stats */
            /* global mapv */
            /* global mapvgl */
            /* global initMap */
            /* global purpleStyle */
            var map = initMap({
                tilt: 0,
                heading: 0,
                center: [106.529294, 29.603177],
                zoom: 14,
                style: purpleStyle,
            });

            var view = new mapvgl.View({
                map: map,
            });

            var lineLayer = new mapvgl.LineRainbowLayer({
                style: "road", // road, arrow, normal
                width: 15,
                enablePicked: true,
                color: [
                    "#f00",
                    "#f0f",
                    "#0af",
                    "#0a0",
                    "#F09",
                    "#a09",
                    "#ff0",
                    "#fd0",
                    "#f90",
                    "#f00",
                ],
                onClick() {
                    console.log(222);
                },
                onMousemove() {
                    console.log(1111);

                    // lineLayer.setOptions({
                    //     width: 30,
                    // });
                },
            });
            view.addLayer(lineLayer);

            var data = [
                {
                    geometry: {
                        type: "LineString",
                        coordinates: [
                            [106.46511017225053, 29.57895992140978],
                            [106.47775831382684, 29.588508247138453],
                            [106.47933933152389, 29.5964226147607],
                            [106.48825052217992, 29.609109418994105],
                            [106.51239697428015, 29.617650121451547],
                            [106.52030206276535, 29.61802690031047],
                            [106.5351061375649, 29.621920198526308],
                            [106.53970546177446, 29.620915490952946],
                            [106.54487970151023, 29.62392958331314],
                            [106.55839021637583, 29.626064510293723],
                        ],
                    },
                },
            ];
            lineLayer.setData(data);

            //  lineLayer.addEventListener("mouseover", () => {
            //                    lineLayer.setOptions({
            //   lineCap: value,
            //     width:30
            //   });
            // })
            $("#cap").change((e) => {
                var value = e.target.value;
                lineLayer.setOptions({
                    lineCap: value,
                    width: 30,
                });
            });
            $("#join").change((e) => {
                var value = e.target.value;
                lineLayer.setOptions({
                    lineJoin: value,
                });
            });
        </script>
    </body>
</html>
